<template>
    <div id="financial_reconciliation">
        <el-card class="mg-b-10">
            <el-row :gutter="20">
                <el-col :span="14">
                    <div class="grid-content">
                        <el-select class="select-prefix" size="mini" v-model="storeNo" placeholder="请选择门店" clearable filterable style="margin-right: 30px">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>选择门店</span>
                            </template>
                            <el-option-group
                            v-for="group in storeList"
                            :key="group.cityId"
                            :label="group.city">
                                <el-option
                                    v-for="item in group.list"
                                    :key="item.storeNo"
                                    :label="item.storeName"
                                    :value="item.storeNo">
                                </el-option>
                            </el-option-group>
                        </el-select>
                        <el-date-picker
                        v-if="isShowTime"
                        size="mini"
                        v-model="time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="handleChangeDate"
                        >
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="grid-content">
                        <div style="float:right">
                            <el-checkbox border size="mini" v-model="isShowTime" @change="handleChangeCheckBox">自定义时间</el-checkbox>
                            <el-radio-group v-model="radio" size="mini" style="margin-right:20px" @change="handleChange">
                                <el-radio-button label="1">昨日</el-radio-button>
                                <el-radio-button label="2">本月</el-radio-button>
                                <el-radio-button label="3">上月</el-radio-button>
                            </el-radio-group>
                           
                            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleChangeSearch">查 询</el-button>
                        </div>
                        
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="box-card border-1">
                            <div class="box-card-left">
                                <el-image style="width: 32px; height: 32px" src="https://goods.dingdian.xin/Fo9BHl2vfYQbhb7VOASaqx9gxuyR?imageMogr2/thumbnail/400000@" fit="cover"></el-image>
                            </div>
                            <div class="box-card-right">
                                <span class="text">销售金额</span>
                                <span class="num">¥{{formData.salesAmountTotal}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="box-card border-2">
                            <div class="box-card-left">
                                <el-image style="width: 32px; height: 32px" src="https://goods.dingdian.xin/FnW8oOg8tvklcW3l-n1IW6a9yvNS?imageMogr2/thumbnail/400000@" fit="cover"></el-image>
                            </div>
                            <div class="box-card-right">
                                <span class="text">退款金额</span>
                                <span class="num">¥{{formData.refundAmountTotal}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="box-card border-3">
                            <div class="box-card-left">
                                <el-image style="width: 32px; height: 32px" src="https://goods.dingdian.xin/FlWFURRiNRMLFlK2kMJxsjtc0ivw?imageMogr2/thumbnail/400000@" fit="cover"></el-image>
                            </div>
                            <div class="box-card-right">
                                <span class="text">店员代充</span>
                                <span class="num">¥{{formData.replaceAmountTotal}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="box-card border-4">
                            <div class="box-card-left">
                                <el-image style="width: 32px; height: 32px" src="https://goods.dingdian.xin/FgqOdVES48Zl13kTVb-2_VZeOYAa?imageMogr2/thumbnail/400000@" fit="cover"></el-image>
                            </div>
                            <div class="box-card-right">
                                <span class="text">应收金额</span>
                                <span class="num">¥{{formData.deserveAmountTotal}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="box-card border-5">
                            <div class="box-card-left">
                                <el-image style="width: 32px; height: 32px" src="https://goods.dingdian.xin/FhWP8JbJi2OvexLeYl8a4h8GhGgW?imageMogr2/thumbnail/400000@" fit="cover"></el-image>
                            </div>
                            <div class="box-card-right">
                                <span class="text">实收金额</span>
                                <span class="num">¥{{formData.factAmountTotal}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div class="box-card border-6">
                            <div class="box-card-left">
                                <el-image style="width: 32px; height: 32px" src="https://goods.dingdian.xin/Fu6oO6WNX1HqPpGiW29V_g_JgDTq?imageMogr2/thumbnail/400000@" fit="cover"></el-image>
                            </div>
                            <div class="box-card-right">
                                <span class="text" style="color: #e60012">金额差异</span>
                                <span class="num" style="color: #e60012">¥{{formData.marginAmountTotal}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
                <el-col :span="24">
                    <div class="grid-content" style="float: right">
                        <el-button type="primary" size="mini" @click="handleClickstoreFinanceDayDetail"> <i class="iconfont excel" style="font-size: 12px;margin-right: 2px"></i>对账单导出</el-button>
                        <el-button type="primary" size="mini" @click="handleClickstoreSalesOrder"><i class="iconfont excel" style="font-size: 12px;margin-right: 2px"></i>销售订单导出</el-button>
                        <el-button type="primary" size="mini" @click="handleClickstoreRefundDetail"><i class="iconfont excel" style="font-size: 12px;margin-right: 2px"></i>退款单导出</el-button>
                        <el-button type="primary" size="mini" @click="isShow= true"><i class="iconfont excel" style="font-size: 12px;margin-right: 2px"></i>订单流水导出</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <el-table stripe :data="tableData" border :summary-method="getSummaries" show-summary :cell-style="handleCellStyle">
                <el-table-column label="门店名称" prop="">
                    <template slot-scope="scope">
                        <el-popover
                        placement="right"
                        width="400"
                        trigger="click">
                            <el-table :data="gridData" max-height="300" border :summary-method="getSummaries" show-summary>
                                <el-table-column property="channel" label="收款渠道"></el-table-column>
                                <el-table-column property="saleAmount" label="销售金额"></el-table-column>
                                <el-table-column property="refundAmount" label="退款金额"></el-table-column>
                                <el-table-column property="receivedAmount" label="实收金额"></el-table-column>
                            </el-table>
                            <el-button slot="reference" type="text" size="small" @click="getStoreReceiptChannel(scope.row)">
                                {{scope.row.storeName}}
                            </el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="日期" prop="gmtAccount"></el-table-column>
                <el-table-column label="销售金额(元)" prop="saleAmount"></el-table-column>
                <el-table-column label="退款金额(元)" prop="refundAmount"></el-table-column>
                <el-table-column label="店员代充(元)" prop= "rechargeAmount"></el-table-column>
                <el-table-column label="应收金额(元)" prop= "receivableAmount"></el-table-column>
                <el-table-column label="已到账金额(元)" prop= "receivedAmount"></el-table-column>
                <el-table-column label="金额差异(元)" prop="unreceivedAmount">
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
            <cashFlowDownloadTpl v-if="isShow" :isShow="isShow" @cancelShow="cancelShow"></cashFlowDownloadTpl>
        </el-card>
    </div>
</template>
<script>
    import page from '../commonComponents/page'
    import cashFlowDownloadTpl from './cashFlowDownloadTpl'
    export default {
        components: { page, cashFlowDownloadTpl },
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                storeList: [],
                storeNo: '',
                time: [],
                dateArr: ['昨日', '本月', '上月'],
                radio: '1',
                tableData: [],
                isShowTime: false,
                isShow: false, // 订单流水下载
                formData: {
                    salesAmountTotal: '0',
                    refundAmountTotal: '0',
                    replaceAmountTotal: '0',
                    deserveAmountTotal: '0',
                    factAmountTotal: '0',
                    marginAmountTotal: '0'
                },
                startDate: '',
                endDate: '',
                gridData: [],
                downUrl: process.env.BASE_API + '/ddaigo-platform/finances/export/' 
            }
        },
        mounted() {
            this.getStoreListByGroup()
            this.handleChange(1)
        },
        methods: {
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    this.storeList= res.data
                })
            },
            /**财务对账列表数据 */
            getFinancialList() {
                try{
                    let query= {
                        page: this.page,
                        size: this.size,
                        startTime: this.startDate,
                        endTime: this.endDate,
                        storeNo: this.storeNo
                    }
                    this.$server.financialControlApi.getFinancialList(query).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err){this.$paramsError(err)}
            },
            /**查询日期范围内统计数据 */
            getFinancialStatic() {
                try{
                    let params ={
                        startTime: this.startDate,
                        endTime: this.endDate,
                        storeNo: this.storeNo
                    }
                    this.$server.financialControlApi.getFinancialStatic(params).then(res => {
                        if(res.data) {
                            this.formData.salesAmountTotal= res.data.saleAmountTotal
                            this.formData.refundAmountTotal= res.data.refundAmountTotal
                            this.formData.replaceAmountTotal= res.data.rechargeAmountTotal
                            this.formData.deserveAmountTotal= res.data.receivableAmountTotal
                            this.formData.factAmountTotal= res.data.receivedAmountTotal
                            this.formData.marginAmountTotal= res.data.unreceivedAmountTotal
                        }
                    })
                }catch(err){this.$paramsError(err)}
            },
            /**自定义时间选择 */
            handleChangeCheckBox(val) {
                if(val) {
                    this.radio= ''
                    this.startDate= ''
                    this.endDate= ''
                    this.time= []
                    this.getFinancialStatic()
                    this.getFinancialList()
                }else{
                    this.radio= '1'
                    this.handleChange(1)
                }
            },
            /**点击门店获取渠道详情 */
            getStoreReceiptChannel(scope) {
                try{
                    let params= {
                        data: {
                            storeNo: scope.storeNo,
                            financeDate: scope.gmtAccount
                        }
                    }
                    this.$server.financialControlApi.storeReceiptChannel(params).then(res => {
                        this.gridData= res.data
                    })
                }catch(err) {this.$paramsError(err)}
            },
            /**表格底部合计 */
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        if(sums[index] != 0) {
                            sums[index]= sums[index].toFixed(2)
                        }
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
            handleChangeSearch() {
                this.page= 1
                this.getFinancialList()
                this.getFinancialStatic()
            },
            handleChangeDate() {
                if(this.time) {

                    if(this.time.length > 0) {
                        if(new Date(this.time[0]).getTime() >= new Date('2019-09-01 00:00:00').getTime()) {
                            this.startDate= this.formate(new Date(this.time[0]).getTime(), 'yyyy-MM-dd')
                            this.endDate= this.formate(new Date(this.time[1]).getTime(), 'yyyy-MM-dd')
                        }else{
                            this.$confirm('最早查询时间为2019-09-01')
                            this.time= []
                        }
                    }
                }else{
                    this.startDate= ''
                    this.endDate= ''
                }
            },
            handlePageChange(page) {
                this.page= page
                this.getFinancialList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getFinancialList()
            },
            /**对账单下载 */
            handleClickstoreFinanceDayDetail() {
                try {
                    let obj= {
                        url: this.downUrl + 'storeFinanceDayDetail',
                        name: '对账单' +this.startDate + '-' + this.endDate,
                        params: {
                            data: {
                                storeNo: this.storeNo,
                                startDate: this.startDate,
                                endDate: this.endDate
                            }
                        },
                        type: 'v1'
                    }
                    this.$server.excelApi.downLoadExcelPost(obj)
                }catch(err) {this.$paramsError(err)}
            },
            /**销售订单下载 */
            handleClickstoreSalesOrder() {
                try {
                    let obj= {
                        url: this.downUrl + 'storeSalesOrder',
                        name: '销售订单' +this.startDate + '-' + this.endDate,
                        params: {
                            data: {
                                storeNo: this.storeNo,
                                startDate: this.startDate,
                                endDate: this.endDate
                            }
                        },
                        type: 'v1'
                    }
                    this.$server.excelApi.downLoadExcelPost(obj)
                }catch(err) {this.$paramsError(err)}
            },
            /**退款订单下载 */
            handleClickstoreRefundDetail() {
                try {
                    let obj= {
                        url: this.downUrl + 'storeRefundDetail',
                        name: '退款订单' +this.startDate + '-' + this.endDate,
                        params: {
                            data: {
                                storeNo: this.storeNo,
                                startDate: this.startDate,
                                endDate: this.endDate
                            }
                        },
                        type: 'v1'
                    }
                    this.$server.excelApi.downLoadExcelPost(obj)
                }catch(err) {this.$paramsError(err)}
            },
            handleChange(val) {
                this.isShowTime= false
                let year= new Date().getFullYear(),
                    mounth= new Date().getMonth() + 1,
                    day= new Date().getDate();
         
                if(val == 1) {
                    // 昨日
                    if(day-1 > 0) {
                        this.startDate= year+ '-' + mounth + '-' +(day-1)
                        this.endDate= year+ '-' + mounth + '-' +(day-1)
                    }else{
                        if(mounth - 1 > 0) {
                            if(mounth != 3) {
                                if(mounth == 5 || mounth == 7 || mounth ==8 || mounth == 10 || mounth == 12) {
                                    this.startDate= year + '-' + (mounth-1) + '30'
                                    this.endDate= year + '-' + (mounth-1) + '-30'
                                }else{
                                    this.startDate= year + '-' + (mounth-1) + '-31'
                                    this.endDate= year + '-' + (mounth-1) + '-31'
                                }
                            }else{
                                if((year % 4 == 0 && year%100 != 0) || year % 400 == 0) {
                                    this.startDate= year + '-' + '02-' + '29'
                                    this.endDate= year + '-' + '02-' + '29'
                                } else{
                                    this.startDate= year + '-' + '02-' + '28'
                                    this.endDate= year + '-' + '02-' + '28'
                                }
                            }

                        }else{
                            this.startDate= year-1 + '-' + '12-' + '31'
                            this.endDate= year-1 + '-' + '12-' + '31'
                        }
                    }
                }else if(val == 2) {
                    // 本月
                    this.startDate= year + '-' + mounth +  '-01'
                    this.endDate= year + '-' + mounth +  '-31'
                   // this.endDate= this.formate(new Date().getTime(), 'yyyy-MM-dd')
                }else if(val == 3) {
                    // 上月
                    if(mounth == 1) {
                        this.startDate= year-1 + '-' + 12 + '-01'
                        this.endDate= year-1 + '-' + 12 + '-31'
                    }else if(mounth == 3) {
                        if((year % 4 == 0 && year%100 != 0) || year % 400 == 0) {
                            this.startDate= year + '-' + '02-' + '01'
                            this.endDate= year + '-' + '02-' + '29'
                        } else{
                            this.startDate= year + '-' + '02-' + '01'
                            this.endDate= year + '-' + '02-' + '28'
                        }
                    }else{
                        if(mounth == 2 || mounth == 4 || mounth == 6 || mounth == 8 || mounth == 9 || mounth == 11) {
                            this.startDate= year + '-' + (mounth -1) + '-01'
                            this.endDate= year + '-' + (mounth -1) + '-31'
                        }else{
                            this.startDate= year + '-' + (mounth -1) + '-01'
                            this.endDate= year + '-' + (mounth -1) + '-30'
                        }
                    }
                }
                this.total= 0
                this.page= 1
                this.getFinancialList()
                this.getFinancialStatic()
             
            },
            cancelShow(title) {
                this.isShow= title
            },
            handleCellStyle({row, column, rowIndex, columnIndex}) {
                if(column.property == 'unreceivedAmount' && row['unreceivedAmount'] != 0) {
                    return 'background: #e6c33c !important;'
                }else{

                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .box-card {
        display: flex;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
       // width: 100%;
        border-radius:5px;
        height: 74px;
        background-color: #ffffff;
        
        .box-card-left {
            margin-right: 10px;
        }
        .box-card-right {
            display: flex;
            flex-direction: column;
            .text{
                font-size: 12px;
                color: #666;
                font-family: Microsoft YaHei;
                margin-bottom: 12px;
            }
            .num {
                font-size: 22px;
                color: #474747;
                font-family: Helvetica;

            }
        }
    }
    .box-card:hover {
        transform: scale(1.1)
    }
    .border-1 {
        box-shadow: 0px 3px 3px 0px 
            rgba(255, 112, 104, 0.3);
        border: solid 1px rgba(230, 0, 18, 0.15);
    }
    .border-2 {
        box-shadow: 0px 3px 3px 0px 
            rgba(252, 198, 8, 0.3);
        border: solid 1px rgba(253, 200, 5, 0.15);
    }
    .border-3 {
        box-shadow: 0px 3px 3px 0px 
		rgba(68, 151, 238, 0.3);
	    border: solid 1px rgba(47, 178, 244, 0.15);
    }
    .border-4 {
        box-shadow: 0px 3px 3px 0px 
		rgba(233, 198, 144, 0.3);
	    border: solid 1px rgba(231, 196, 142, 0.15);
    }
    .border-5 {
        box-shadow: 0px 3px 3px 0px 
		rgba(83, 213, 126, 0.3);
	    border: solid 1px rgba(83, 213, 125, 0.15);
    }
    .border-6 {
        box-shadow: 0px 3px 3px 0px 
		rgba(133, 96, 243, 0.3);
	    border: solid 1px rgba(134, 97, 244, 0.15);
    }
     @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        0%{
            transform: scale(1);  /*开始为原始大小*/
        }
    
        100%{
            transform: scale(1.1);
        }
    }
</style>